<template>
	<view class="addsite">
		<view>
			<view>
				<view>收货人</view>
				<view><input type="text" v-model="name" placeholder="名字" /></view>
			</view>
			<view>
				<view>手机号</view>
				<view><input type="number" v-model="phone" placeholder="手机号" /></view>
			</view>
			<view>
				<view>选择地区</view>
				<view>
					<pickerAddress @change="change">{{txt}}</pickerAddress>
				</view>
			</view>
			<view>
				<view>详细地址</view>
				<view><input type="text" v-model="site" placeholder="小区名称" /></view>
			</view>
		</view>
		<view class="site">
			<u-button type="warning" @click="add">保存</u-button>
		</view>
	</view>

</template>

<script>
	import pickerAddress from '../../components/pickerAddress/pickerAddress.vue'
	components: {
		pickerAddress
	}
	export default {
		data() {
			return {
				txt: '选择地址',
				phone: '',
				name: '',
				site: '',
				province: '',
				city: '',
				district: ''

			}
		},
		methods: {
			change(data) {
				console.log(this.province = data.data[0])
				console.log(this.city = data.data[1])
				console.log(this.district = data.data[2])
				console.log(this.txt = data.data.join(''))
			},
			add() {
				if (this.name == '') {
					uni.showToast({
						title: '请填写收货人',
						icon: 'none',
						duration: 1000
					});
					return
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none',
						duration: 1000
					});
					return
				}

				if (this.txt == '选择地址') {
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 1000
					});
					return
				}
				if (this.site == '') {
					uni.showToast({
						title: '请填写详细地址',
						icon: 'none',
						duration: 1000
					});
					return
				}
				let {
					phone,
					name,
					site,
					province,
					city,
					district
				} = this
				this.$u.post('/p/address/addAddr',{
					province:province,
					city:city,
					area:district,
					addr:site,
					mobile:phone,
					receiver:name
				}).then(res => {
					uni.navigateTo({
						url: '/my/site/site',
					});
				}).catch((e) => {})
				// this.$u.get('/p/address/list').then(res =>{
				// 	}).catch((e) => {});
				
			}
		}
	}
</script>

<style>
	.addsite>view {
		width: 90%;
		margin: 0 auto;
	}

	.addsite>view>view {
		margin-top: 20rpx;
		display: flex;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
	}

	.addsite>view>view>view:nth-child(1) {
		width: 25%;
	}

	.addsite>view>view>view:nth-child(2) {
		margin-left: 5%;
		width: 70%;
	}

	input {
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
